import React, { useState } from 'react'
import { Button, Form, Input, Selector } from 'antd-mobile'
import { AuthRoute } from '../web/auth';
import { startWork } from '../apis/start';
import { COMMAND_UPDATE_DEVICE_SETTING, getToken } from '../tokens';
import { runCommand } from '../web/util';

export const SettingPage: React.FC<{}> = ({ }) => {
  const [deviceTypes, setDeviceTypes] = useState<any[]>([
    { label: '工作机', value: 'work' },
    { label: '管理机', value: 'manager' },
  ])
  const [redTypes, setRedTypes] = useState<any[]>([
    { label: '普通包', value: 'default' },
    { label: '评论包', value: 'comment' },
    { label: '分享包', value: 'share' },
    { label: '粉丝包', value: 'fans' },
  ])
  const [takeRedWays, setTakeRedWays] = useState<any[]>([
    { label: '关注', value: '1' },
    { label: '广场', value: '2' },
  ])
  const [value, setValue] = useState<any>({
    type: 'work',
    take_red_way: `2`,
    stay_time_max: 10,
    operation_interval: 1,
    min_stay_time: 3,
    max_stay_time: 15,
    good_min_stay: 9,
    max_follow: 40,
    follow_v: 50,
    keyword: '美女',
    red_type: ['comment']
  })

  const saveSetting = (e: any) => {
    console.log(e)
    startWork({ token: getToken(), settings: e })
    runCommand(COMMAND_UPDATE_DEVICE_SETTING, e)
  }
  const renderWork = () => {
    return <>
      <div className='px-12px py-8px bg-efefef'>养机配置</div>
      <Form.Item label="最小时长" name={'min_stay_time'} extra={<span>秒</span>}>
        <Input type="number" placeholder='建议3-5' />
      </Form.Item>
      <Form.Item label="最大时长" name={'max_stay_time'} extra={<span>秒</span>}>
        <Input type="number" placeholder='建议15-25' />
      </Form.Item>
      <Form.Item label="点赞触发" name={'good_min_stay'} extra={<span>秒</span>}>
        <Input type="number" placeholder='随机停留时间越长越感兴趣' />
      </Form.Item>
      <Form.Item label="关注概率" name={'follow_v'} extra={<span>%</span>}>
        <Input type="number" placeholder='满足点赞条件的关注概率' />
      </Form.Item>
      <Form.Item label="最大关注" name={'max_follow'} extra={<span>每日</span>}>
        <Input type="number" placeholder='每日最大关注' />
      </Form.Item>
      <Form.Item label="关键字" name={'keyword'} extra={<span></span>}>
        <Input placeholder='感兴趣的关键字' />
      </Form.Item>
      <div className='px-12px py-8px bg-efefef'>抢包配置</div>
      <Form.Item name={'red_type'} label="">
        <Selector
          options={redTypes}
          multiple
          onChange={(arr, extend) => {
            setValue(init => {
              return {
                ...init,
                take_red_way: arr[0]
              }
            })
          }}
        />
      </Form.Item>
      <Form.Item label="单次不中" name={'mood_v'} extra={<span></span>}>
        <Input type="number" placeholder='减少今日心情值' />
      </Form.Item>
      <Form.Item label="连续不中" name={'mood_vv'} extra={<span>^n</span>}>
        <Input type="number" placeholder='建议1.2' />
      </Form.Item>
      <Form.Item label="触发养机" name={'mood_min'} extra={<span>心情</span>}>
        <Input type="number" placeholder='30' />
      </Form.Item>
      <div className='px-12px py-8px bg-efefef flex'>
        休息配置
        <div className='flex-1'></div>
        <p className='text-12px'>每次休息完后，心情恢复100</p>
      </div>
      <Form.Item label="晚休息" name={'bed_time'} extra={<span></span>}>
        <Input type="time" placeholder='建议24:00:00' />
      </Form.Item>
      <Form.Item label="最大时长" name={'bed_max_time_long'} extra={<span>分钟</span>}>
        <Input type="number" placeholder='建议24:00:00' />
      </Form.Item>
      <Form.Item label="随机延迟" name={'bed_delay_time'} extra={<span>分钟</span>}>
        <Input type="number" placeholder='建议120' />
      </Form.Item>
      <Form.Item label="午休" name={'noop_time'} extra={<span></span>}>
        <Input type="time" placeholder='建议11:30:00' />
      </Form.Item>
      <Form.Item label="最大时长" name={'noop_max_time_long'} extra={<span>分钟</span>}>
        <Input type="number" placeholder='建议30' />
      </Form.Item>
      <Form.Item label="随机延迟" name={'noop_delay_time'} extra={<span>分钟</span>}>
        <Input type="number" placeholder='建议60' />
      </Form.Item>
    </>
  }
  const renderManager = () => {
    return <>
      <Form.Item name={'take_red_way'} label="方式">
        <Selector
          options={takeRedWays}
          onChange={(arr, extend) => {
            setValue(init => {
              return {
                ...init,
                take_red_way: arr[0]
              }
            })
          }}
        />
      </Form.Item>
      <Form.Item name="stay_time_max" label="停留时长" extra={<span>秒</span>}>
        <Input type="number" placeholder='超过此值，切换至下一个' />
      </Form.Item>
      <Form.Item name="operation_interval" label="操作间隔" extra={<span>秒</span>}>
        <Input type="number" placeholder='防止操作过快风控' />
      </Form.Item>
    </>
  }
  return <AuthRoute>
    <div className='flex flex-col h-full'>
      <Form layout='horizontal' onFinish={e => {
        saveSetting(e)
      }} initialValues={value} footer={<Button block type='submit' color='primary' size='middle'>提交</Button>}>
        <Form.Item name={'type'}>
          <Selector
            options={deviceTypes}
            onChange={(arr, extend) => {
              setValue(init => {
                return {
                  ...init,
                  type: arr[0]
                }
              })
            }}
          />
        </Form.Item>
        {value.type === 'work' && renderWork()}
        {value.type === 'manager' && renderManager()}
      </Form>
    </div>
  </AuthRoute>
}
